<template>
  <up-navbar title="协议详情" bgColor="transparent"></up-navbar>
  <img src="../../static/bg.png" alt="" class="bg" />
  <img src="../../static/bigIcon.png" alt="" class="bigIcon" />
  <img src="../../static/phone.png" alt="" class="phone" />
  <div class="topSitting">头部占位</div>
  <div class="mainArea">
    <div class="mainBg">半透明背景</div>
    <div class="protocolText">
      协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议
    </div>
  </div>
  <div class="submitBtn" @click="signContract">同意协议并继续</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
const store = useAppStore();
// 上一个页面传的信息
let info = null;
// 合同id
let fileId = "";
onLoad((option) => {
  info = JSON.parse(option.value);
  http
    .interviewPreview({
      orderId: store.orderId,
      bizId: store.bizId,
      bizType: "B020603",
      ...info,
    })
    .then((res) => {
      // 面谈承诺书id
      store.setInterviewContractId(res.data.contractId);
      fileId = res.data.fileId;
      wx.setStorageSync('fileMap',res.data.fileMap)
    });
});
const signContract = () => {
  console.log(wx.getStorageSync('fileMap'));
  http
    .interviewSign({
      orderId: store.orderId,
      orderNo: store.orderNo,
      bizId: store.bizId,
      bizType: "B020604",
      fileId,
      fileMap:wx.getStorageSync('fileMap'),
      contractId: store.interviewContractId,
    })
    .then((res) => {
      if (res.code == 200) {
        wx.showToast({
          title: "签署协议成功",
          mask: "true",
          icon: "none",
          duration: 1500,
        });
        setTimeout(() => {
          wx.navigateBack({delta:2})
        }, 1500);
      }
    });
};
</script>

<style scoped lang="scss">
.bg {
  width: 750rpx;
  height: 873rpx;
  position: absolute;
  z-index: -999999;
}
.bigIcon {
  width: 90rpx;
  height: 113rpx;
  position: absolute;
  z-index: -99999;
  left: 534rpx;
  top: 141rpx;
}
.phone {
  width: 45rpx;
  height: 51rpx;
  position: absolute;
  z-index: -99999;
  left: 629rpx;
  top: 187rpx;
}
.topSitting {
  height: 240rpx;
  opacity: 0;
}
.mainArea {
  padding: 34rpx 22rpx 22rpx 41rpx;
  margin: 0 28rpx;
  position: relative;
  border-radius: 16rpx;
  box-shadow: 0 19rpx 0 0 #c2ddff;
  .mainBg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
    background-color: #fff;
    border-radius: 16rpx;
    opacity: 85%;
    color: transparent;
  }
  .protocolText {
    color: #333;
  }
}
.submitBtn {
  width: 590rpx;
  height: 88rpx;
  margin: 48rpx 80rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  text-align: center;
  background-image: linear-gradient(to right, #619df1, #4478c1);
  color: #ffffff;
  font-size: 32rpx;
}
</style>
